<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模型管理</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<!-- jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<!-- Dialog -->
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Dialog.css">
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Dialog.js"></script>
<script src="/js/index.js"></script>
<style>
    .input_model{
        margin-top: 3%;
    }
</style>
<body>
<!--导航栏-->
<div th:replace="common :: navbar"></div>
<!--中部统计数据-->
<div th:replace="common :: boxbar"></div>

<p th:if="${session.user.role == 1}" style="margin-left: 10%;text-align: left;color: grey">
    <a  href="/admin/userList" class="p_button" >用户管理</a>
    <a href="/modelList"  class="p_button" style="color: #2a80eb">模型管理</a>
    <a  href="/modelAdd"  class="p_button  button-warning pure-button" style="margin-left: 60%;" >新建模型</a>
</p>
<p  th:if="${session.user.role == 2}" style="margin-left: 10%;text-align: left;color: grey">
    <a href="/modelList" class="p_button" style="color: #2a80eb">教学模块</a>
    <a href="/myClass" class="p_button" >我的班级</a>
    <a href="/teacher/lesson"  class="p_button" >我的课程</a>
</p>

<section class="lesson_box" style="height: 100%">
    <form id="form" style="width: 50%;height: 100%" action="/model/insert">
        <input name="id" th:value="${yxModel.id}" type="hidden">
        <p>
            示例：P = (700 - 2Q) / 100 即  a = -2 ,b = 700,c = 100。
        </p>
        <input th:value="${yxModel.name}" style="font-size: 18px;" name="name" id="name" placeholder = "模型名称" class="ui-input input_model">
        <br>
        <label>需求公式：</label>
        <br>
        <input th:value="${yxModel.needA}" style="font-size: 18px;" name="needA" placeholder = "a" class="ui-input input_model" type="number">
        <input th:value="${yxModel.needB}" style="font-size: 18px;" name="needB" placeholder = "b"  class="ui-input input_model" type="number">
        <input   th:value="${yxModel.needTrid}" style="font-size: 18px;" name="needTrid" placeholder = "c" class="ui-input input_model" type="number">
        <br>
        <label>供给公式：</label>
        <br>
        <input  th:value="${yxModel.provideA}" style="font-size: 18px;" name="provideA" placeholder = "a" class="ui-input input_model" type="number">
        <input  th:value="${yxModel.provideB}" style="font-size: 18px;" name="provideB" placeholder = "b" class="ui-input input_model" type="number">
        <input   th:value="${yxModel.provideTrid}" style="font-size: 18px;" name="provideTrid" placeholder = "c" class="ui-input input_model" type="number">
        <br>
        <input th:value="${yxModel.limitTime}"  style="font-size: 18px;" name="limitTime" placeholder = "结束限时（默认5min）" class="ui-input input_model" type="number">
        <input th:value="${yxModel.issue}"  style="font-size: 18px;" name="issue" placeholder = "课程的期数(默认12期)" class="ui-input input_model" type="number">
        <input th:value="${yxModel.moveLimit}"  style="font-size: 18px;" name="moveLimit" placeholder = "偏移量（默认30单位）" class="ui-input input_model" type="number">
        <br>
        <input th:value="${yxModel.rule}"  style="font-size: 18px;width: 85%" name="rule" placeholder = "公式" class="ui-input input_model" type="text">
        <input th:value="${yxModel.remark}"  style="font-size: 18px;width: 85%" name="remark" placeholder = "模型简介" class="ui-input1-2 input_model" type="text">

        <input style="font-size: 18px;" id="upload" placeholder = "选择图片" accept="image/*"  class="ui-input input_model" type="file">
        <input  th:value="${yxModel.imgUrl}" style="font-size: 18px;width: 85%" id="imgUrl" placeholder = "上传支持jpg、npg、gif等格式。"
                accept="image/*" name="imgUrl" class="ui-input input_model" type="text" readonly>
        <br>
        <div style="width: 80%;height: 50%;margin-top: 3%;margin-left:10%;text-align: center" id="imgBox">
            <img th:src="${yxModel.imgUrl}" onerror="this.src='/img/default.jfif'"  style='width: 100%;height: 100%'>
        </div>
        <button  style="font-size: 18px;margin-top: -50%;"onclick="editModel();" class="ui-button input_model"  type="button">提交</button>
        <br>

    </form>
</section>

<script>
    listener();
    function listener(){
        document.getElementById('upload').addEventListener('change', function (event) {
            var $file = event.currentTarget;
            var file = $file.files;
            console.log(file);
            var formData = new FormData();
            formData.append("file", file[0]);
            console.log(formData);
            $.ajax({
                url: '/upload',
                type: 'POST',
                dataType: 'json',
                data: formData,
                contentType: false,
                processData: false,
                error:function(data){
                    console.log(data);
                    alert("请求出错.");
                },
                success:function(data){
                    console.log(data);
                    document.getElementById("imgUrl").value = data.data;
                    alert("请求成功"+data.msg);
                    $("#imgBox").html("<img src='"+data.data+"' style='width: 100%;height: 100%'>");
                }
            })

        });
    }
    function editModel() {
        console.log($("#form").serialize());
        sendJump("/admin/update","/modelList",null,"form");
    }


</script>
</body>
</html>